<template>
	<view class="discussContainer">
		<!-- 头部开始 -->
		<view class="header">
			<view class="hdTitle">
				<text>更新日记</text>
			</view>
			<view class="hdBtn">
				<u-button :custom-style="btnStyle" @click="uploadDiary">发布</u-button>
			</view>
		</view>
		<!-- 头部结束 -->
		<!-- 输入框内容开始 -->
		<view class="content">
			<u-input height="262" :auto-height="true" v-model="Contentvalue" type="textarea" border="border"
				placeholder="正文" />
		</view>
		<!-- 输入框内容结束 -->
		<!-- 内容标签开始 -->
		<view class="contentTag">
			<input v-model="contentTagValue" type="text" value="" placeholder="学习心得" />
		</view>
		<!-- 内容标签结束 -->
		<!-- 分享社区部分开始 -->
		<view class="shequ">
			<view class="shequTitle">
				<text>同时发布到社区中</text>
			</view>
			<view class="shequSwith">
				<u-switch v-model="checked"></u-switch>
			</view>
		</view>
		<!-- 分享社区部分结束 -->
		<!-- 上传区域开始 -->
		<view @click="getPicture" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
			<image src="../../../static/jzqIcon/uploadIcon.png" mode=""></image>
			<text>上传图片</text>
		</view>

		<!-- 上传区域结束 -->
	</view>
</template>

<script>
	import {
		BASE_URL,
		request
	} from "../../../util/api";
	import {
		TOAST
	} from "../../../util/util";
	export default {
		data() {
			return {
				action: 'http://121.4.90.147:8080/common/upload',
				showUploadList: false,
				base64Data: "/static/img/photo.png",
				lists: [],
				// 开关状态
				checked: true,
				// 输入框样式
				inputStyle: {
					maxWidth: "400rpx",
					height: "60rpx",
					borderRadius: "50rpx"
				},
				// 自定义按钮样式
				btnStyle: {
					width: "148rpx",
					height: "62rpx",
					fontSize: "28rpx",
					backgroundColor: "#2A6CAC",
					color: "#fff"
				},
				// 输入框数据
				Contentvalue: "",
				contentTagValue: ""
			};
		},
		onLoad() {
			request({
				url: '/system/CompassDiaryMsg/list',
				method: "get",
			}).then(res => {
				console.log(res)
			})
		},
		methods: {
			getPicture() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// 转成base64
						let that = this
						wx.getFileSystemManager().readFile({
							filePath: tempFilePaths[0],
							encoding: "base64",
							success(res) {
								that.base64Data = 'data:image/png;base64,' + res.data;
								// 转换完成，开始执行上传
								that.uploadPic()
							},
							error(err) {
								console.log(err)
							}
						})
					}
				});
			},

			uploadPic() {
				uni.showLoading({
					mask: true,
					title: '图片上传种'
				})
				request({
					url: '/common/upload/base64',
					data: {
						file: this.base64Data
					},
					method: 'post'
				}).then(res => {
					this.base64Data = res.msg;
					console.log(res.msg)
					console.log(this.base64Data)
				})
			},
			uploadDiary(){
				request({
					url:"/system/CompassDiary",
					method:"post",
					data:{
						diaryDesc:this.Contentvalue,
						diaryType:this.contentTagValue,
						fileList:[
							{
								fileUrl:this.base64Data
							}
						],
						showFlag:1
					}
				}).then(res=>{
					uni.showToast({
						title:res.msg
					})
					uni.navigateTo({
						url:"/pages/ischoolQZ/ischoolQZ"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discussContainer {
		padding: 20rpx 34rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.content {
			margin: 20rpx 0;
		}

		.contentTag {
			input {
				width: 400rpx;
				border: 1rpx solid #CCCCCC;
				font-size: 28rpx;
				height: 60rpx;
				padding: 0 20rpx;
				border-radius: 30rpx;
			}

		}

		.shequ {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.slot-btn {
			width: 162rpx;
			height: 162rpx;
			display: flex;
			margin-top: 20rpx;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			text {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #7f7f7f;
			}
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
	}
</style>
